<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>栅格系统</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<style>
			.row{
				margin-bottom: 20px;
			}
			.row .row{
				margin-top: 10px;
				margin-bottom: 0;
			}
			[class*="col-"]{
				padding-top: 15px;
				padding-bottom: 15px;
				background-color: #eee;
				background-color: rgba(86,61,124,.15);/*透明度*/
				border: 1px solid #ddd;
				border: 1px solid rgba(86,61,124,.2);/*透明度*/
			}
		</style>
		<!--栅格系统-->
		<div class="container">
			<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
			
			<div class="row">
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			
			<div class="row">
				<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			
			<!--测试偏移-->
			<div class="row">
				<div class="col-md-4 offset-1">col-md-4这里有偏移</div>
				<div class="col-md-4 offset-1">col-md-4这里有偏移</div>
			</div>
			
			<div class="row">
				<div class="col-sm-9">这里是小型设备9个格子
				    <div class="row">
				    	<div class="col-sm-8">
				    		first
				    	</div>
				    	<div class="col-sm-4">
				    		two
				    	</div>
				    </div>
				</div>
				
			</div>
			
			<p class="lead">这个前后颠倒用不了，应该没啥吧</p>
			<p class="text-muted">之前的版本是4.1，现在改成3.3.7完全可以使用</p>
			<!--前后颠倒-->
			<div class="row">
				<div class="col-md-9 col-md-push-3">col-md-9</div>
				<div class="col-md-3 col-md-pull-9">col-md-3</div>
			</div>
		</div>
		
	</body>
</html>
